
//别名
import 'css/style.css';
//axios
import axios from 'axios';
//轮播
import Swiper from './js/swiper.min.js';
import './js/swiper.css';
let sw = document.querySelector('.swiper-wrapper');

//9. 使用 aixos 请求数据，把数据请求渲染到页面上(10分)
axios.get('/list').then((res) => {
    reder(res.data);

})
function reder(arr) {
    con.innerHTML = arr.map(v => {
        return `
        <dl>
            <dt><img src="${v.img}" alt=""></dt>
            <dd>${v.cont}</dd>
            <dd style="color: red;">￥${v.price}元</dd>
        </dl>
        
        
        `
    }).join('');

    sw.innerHTML = arr.map(v => {
        return `<div class="swiper-slide"><img src="${v.img}"></div>`
    }).join('');
    //轮播图
    new Swiper('.swiper-container', {
        autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        },
    })
}




